<template>
  <div class="app-container">
    <el-form>
      <el-form-item label="日期选择">
        <el-date-picker
          v-model="date"
          type="week"
          @change="selectDateChange"
          format="yyyy 第 WW 周"
          placeholder="选择周">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-tabs style="margin-bottom: 0px;" v-model="hospitalId" @tab-click="tabsClick">
      <el-tab-pane label="柳林" name="1"></el-tab-pane>
      <el-tab-pane label="光华" name="2"></el-tab-pane>
    </el-tabs>
    <div class="box">
      <!-- <div v-for="[key, item] in data" :key="key"> -->

      <div v-for="day in week" :key="day">
        <div class="header">
          {{ day }}
          <!-- {{ dayjs(date).add(idx -1, 'day').format('YYYY-MM-DD周dddd') }} -->
        </div>
        <div class="value">
          <div>
            类型
          </div>
          <div>
            时间
          </div>
          <div>
            数量
          </div>
          <el-button size="mini" type="danger" style="padding: 1px 6px;visibility: hidden;" icon="el-icon-minus"></el-button>
        </div>
        <!-- <div v-show="ite.id" class="value" v-for="ite in (data[idx -1]?data[idx-1][1]:[])" :key="ite.id"> -->
        <div v-show="ite.id" class="value" v-for="ite in (data && data[day] || [])" :key="ite.id">
          <div>
            {{ types[ite.department] }}
          </div>
          <div>
            {{ ite.time }}
          </div>
          <div>
            {{ ite.quantity }}
          </div>
          <el-button size="mini" type="danger" style="padding: 1px 6px;" icon="el-icon-minus" @click="handleDelete(ite.id)"></el-button>
        </div>
        <el-button size="mini" type="primary" icon="el-icon-plus" class="add" @click="show(day)">
          添加
        </el-button>
      </div>
    </div>

    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%">
      
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="类型">
          <el-radio-group v-model="form.department">
            <el-radio label="0">健康</el-radio>
            <el-radio label="1">妇科</el-radio>
            <el-radio label="2">学生</el-radio>
          </el-radio-group>
          
        </el-form-item>
        <el-form-item label="时间段">
          <el-time-picker
            style="width: 100%;"
            is-range
            v-model="form.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number style="width: 100%;" v-model="form.quantity" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
import { selectSourece, insertSourece, deleteSourece } from '@/api/schedule/schedule.js'
import dayjs from 'dayjs';
import { getWeekDataList,dateToStr } from '@/utils/date.js'
const types = ['健康', '妇科', '学生']
export default {
  name: 'InternetHospitalMangePhysicalSchedule',

  data() {
    return {
      dayjs,
      types,
      week: getWeekDataList(new Date()),
      date: new Date(getWeekDataList(new Date())[0]),
      hospitalId: '1',
      data: {},
      dialogVisible: false,
      form: {}
    };
  },

  mounted() {
    this.selectDateChange(this.date)
  },

  methods: {
    tabsClick(val){
      this.hospitalId = val.name;
      this.selectSourece();
    },
    selectSourece() {
      const data = {
        "hospitalId": this.hospitalId,
        "pageNo": "1",
        "pageSize": "10",
        "queryEndTime": dayjs(this.date).add(7, 'day').format('YYYY-MM-DD'),
        "queryStartTime": dayjs(this.date).format('YYYY-MM-DD')
      }
      selectSourece(data).then(res => {
        console.log(11111, res)
        // this.data = Object.groupBy(res, ({data}) => data)
        // for (let i = 0; i < 7; i++) {
        //   if (!res.find(item => item.data === dayjs().add(i, 'day').format('YYYY-MM-DD'))) {
        //     res.push({
        //       data: dayjs().add(i, 'day').format('YYYY-MM-DD')
        //     })
        //   }
        // }

        this.data = Object.groupBy(res, ({data}) => data)

        console.log(11111, this.data)
      })
    },
    selectDateChange(date) {
      this.date = date
      this.week = getWeekDataList(date)
      this.selectSourece()
    },
    show(date) {
      this.form = {
        department: '0'
      }
      this.form.data = date
      this.dialogVisible = true
    },
    submit() {
      const data = {
        // "data": '2023-09-30',
        "department": this.form.department,
        "data": this.form.data,
        "time": this.form.time.join('-'),
        "area": this.hospitalId,
        "quantity": this.form.quantity
      }
      insertSourece(data).then(res => {
        this.$message.success('添加成功')
        this.selectSourece()

        this.dialogVisible = false
      })
    },
    handleDelete(id) {
      this.$confirm('确认删除该排班?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteSourece({Id: id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.selectSourece()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dfe6ec;
  >div {
    flex: 1;
    text-align: center;
    border: 1px solid #dfe6ec;
    >div{
      border-bottom: 1px solid #dfe6ec;
    }
  }
}

.header {
  line-height: 28px;
  font-weight: 600;
}
.value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
  padding: 0 5px;
  >div {
    width: 20%;
    flex: 1;
    &:nth-child(1) {
      width: 60%;
    }
  }
}
.add {
  margin: 8px;
}
</style>